<template>
  <div>
    <el-row>
      <el-col v-if="personStatus" class="my-card">
        <el-card>
          <div slot="header" class="clearfix">
            <h3>考生基本信息</h3>
          </div>
          <el-row type="flex" justify="center" align="middle">
            <el-image :src="imageUrl" fit="fit" style="width: 214px; height: 300px" />
          </el-row>
          <el-divider />
          <el-row type="flex" justify="start">
            <el-col>
              <el-descriptions :column="1" title="个人基本信息" border>
                <template slot="extra">
                  <el-row type="flex" justify="between">
                    <el-button @click="dialogPassStat = true">密码修改</el-button>
                    <el-button type="primary" @click="dialogStat = true">个人信息修改</el-button>
                  </el-row>
                </template>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-user" />姓名</template>
                  {{ baseName }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i v-if="baseSex === '男'" class="el-icon-male" />
                    <i v-else-if="baseSex === '女'" class="el-icon-female" />
                    性别
                  </template>
                  {{ baseSex }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-lollipop" />年龄</template>
                  {{ baseAge }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-date" />出生日期</template>
                  {{ baseBorn }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-location-information" />籍贯</template>
                  {{ baseHreg }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-star-off" />政治面貌</template>
                  {{ otherZZMM }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-mobile-phone" />联系电话</template>
                  {{ otherLXDH }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-message" />电子邮箱</template>
                  {{ otherDYZX }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-school" />毕业院校</template>
                  {{ schoolName }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-reading" />学历</template>
                  {{ schoolXL }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-suitcase" />专业</template>
                  {{ schoolZY }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-postcard" />身份证号</template>
                  {{ baseCard }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"><i class="el-icon-house" />家庭住址</template>
                  {{ otherJTZZ }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col v-else>
        <el-card>
          <div slot="header" class="clearfix">
            <h3>个人基本信息</h3>
          </div>
          <el-empty description="你还没有注册你的个人信息">
            <el-button type="primary" icon="el-icon-plus" @click="dialogStat = true">注册</el-button>
          </el-empty>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogStat" :center="true" width="350px" :before-close="dialogBeforeCloseEvent" @close="handleDialogClose">
      <h2 slot="title">个人信息注册</h2>
      <studentBaseInfoRegister ref="baseInfoRegisterDialog" @setClose="changeDialogStatus"/>
    </el-dialog>
    <el-dialog :visible.sync="dialogPassStat" :center="true" width="350px" :before-close="dialogPassBeforeCloseEvent" @close="handlePassDialogClose">
      <h2 slot="title">密码更改</h2>
      <transition
        name="change-step"
        mode="out-in"
        leave-active-class="animate__animated animate__fadeOut"
        enter-active-class="animate__animated animate__fadeIn"
      >
        <component :is="selectChange[changeStep - 1]" ref="changePasswordDialog" @stepChangeEvent="changeStepIndex" />
      </transition>
      <div slot="footer">
        <el-steps class="change-el-steps" :active="changeStep - 1" align-center finish-status="success">
          <el-step title="确认账号" />
          <el-step title="更改密码" />
          <el-step title="完成" />
        </el-steps>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import baseInfoRegister from '@/views/personal/components/StudentBaseInfoRegister'
import baseInfoPassword from '@/views/personal/components/StudentBaseInfoPassword'
import baseInfoPassword2 from '@/views/personal/components/StudentBaseInfoPassword2'
import baseInfoPassword3 from '@/views/personal/components/StudentBaseInfoPassword3'

export default {
  name: 'StudentBaseInfoCard',
  components: {
    studentBaseInfoRegister: baseInfoRegister,
    studentBaseInfoPassword: baseInfoPassword,
    studentBaseInfoPassword2: baseInfoPassword2,
    studentBaseInfoPassword3: baseInfoPassword3
  },
  data() {
    return {
      dialogStat: false,
      dialogPassStat: false,
      changeStep: 1,
      selectChange: [
        'student-base-info-password',
        'student-base-info-password2',
        'student-base-info-password3'
      ]
    }
  },
  computed: {
    personStatus() {
      return this.$store.getters.baseInfo.name !== ''
    },
    baseName() {
      return this.$store.getters.baseInfo.name
    },
    baseSex() {
      const gender = this.$store.getters.baseInfo.gender
      if (gender === '1') {
        return '男'
      } else if (gender === '0') {
        return '女'
      } else {
        return 'null'
      }
    },
    baseAge() {
      return this.$store.getters.baseInfo.age
    },
    baseBorn() {
      return this.$store.getters.baseInfo.birthday
    },
    baseCard() {
      return this.$store.getters.baseInfo.id_card
    },
    baseHreg() {
      return this.$store.getters.baseInfo.Id_address
    },
    schoolName() {
      return this.$store.getters.baseInfo.school
    },
    schoolXL() {
      return this.$store.getters.baseInfo.education
    },
    schoolZY() {
      return this.$store.getters.baseInfo.major
    },
    otherZZMM() {
      const Political = this.$store.getters.baseInfo.Political
      if (Political === '3') {
        return '群众'
      } else if (Political === '2') {
        return '共青团员'
      } else if (Political === '1') {
        return '中共党员'
      } else {
        return 'null'
      }
    },
    otherLXDH() {
      return this.$store.getters.baseInfo.mobile
    },
    otherDYZX() {
      return this.$store.getters.baseInfo.email
    },
    otherJTZZ() {
      return this.$store.getters.baseInfo.Home_address
    },
    imageUrl() {
      return this.$store.getters.baseInfo.user_image
    }
  },
  mounted() {
    const formData = JSON.parse(sessionStorage.getItem('baseInfo'))
    const formDataDict = {
      form: {
        Home_address: formData.Home_address === 'null' ? '' : formData.Home_address,
        Id_address: formData.Id_address === 'null' ? '' : formData.Id_address,
        age: formData.age === 0 ? '' : formData.age,
        birthday: formData.birthday === 'null' ? '' : formData.birthday,
        education: formData.education === 'null' ? '' : formData.education,
        email: formData.email === 'null' ? '' : formData.email,
        gender: formData.gender === 'null' ? '' : formData.gender,
        major: formData.major === 'null' ? '' : formData.major,
        mobile: formData.mobile === 'null' ? '' : formData.mobile,
        name: formData.name === 'null' ? '' : formData.name,
        school: formData.school === 'null' ? '' : formData.school,
        id_card: formData.id_card === 'null' ? '' : formData.id_card,
        Political: formData.Political === 'null' ? '' : formData.Political
      },
      imageUrl: formData.user_image === 'null' ? '' : formData.user_image,
      imageList: []
    }
    sessionStorage.setItem('formData', JSON.stringify(formDataDict))
  },
  methods: {
    changeDialogStatus(status) {
      this.dialogStat = status
      this.$store.dispatch('user/getBaseInfo')
    },
    handleDialogClose() {
      this.$refs.baseInfoRegisterDialog.clearAllData()
      const formDataDict = JSON.parse(sessionStorage.getItem('formData'))
      this.$refs.baseInfoRegisterDialog.form = formDataDict.form
      this.$refs.baseInfoRegisterDialog.imageUrl = formDataDict.imageUrl
      this.$refs.baseInfoRegisterDialog.imageList = formDataDict.imageList
    },
    dialogPassBeforeCloseEvent(done) {
      if (this.changeStep === 3 || this.changeStep === 1) {
        done()
      } else {
        this.$confirm('更改密码进行中,确认要退出吗？', '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'warning',
            message: '你取消了更改密码操作.'
          })
          done()
        }).catch(() => {})
      }
    },
    dialogBeforeCloseEvent(done) {
      this.$confirm('若未保存，退出将会清空填入内容，确定退出吗？', '操作提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'warning',
          message: '你取消了更改信息操作.'
        })
        done()
      }).catch(() => {})
    },
    handlePassDialogClose() {
      this.changeStep = 1
      this.$refs.changePasswordDialog.clearAllData()
    },
    changeStepIndex(stepIndex) {
      if (stepIndex !== 4) {
        this.changeStep = stepIndex
      } else {
        this.changeStep = stepIndex
        this.dialogPassStat = false
      }
    }
  }
}
</script>

<style scoped>
i {
  font-size: 25px;
}

</style>
